<template>
  <div class="selectInput">
    <el-input
        v-model="name"
        type="text"
        style="width: 100%"
        placeholder="请选择规格"
        clearable
        readonly
        @focus="selectSpecification(true)"
        @blur="outSelect(false)"
    />
    <div v-if="mak && selectSpecificationsData.length" class="specificationSelect">
      <span
          v-for="(it, ind) in selectSpecificationsData"
          :key="ind"
          class="items"
          @click="checkOption(it, ind)"
      >{{ it.name }}</span
      >
      <span v-if="selectSpecificationsData == []" class="none">无数据</span>
    </div>
  </div>
</template>
<script >
import Vue from 'vue';

export default {
  name: 'selectInput',
  props: {
    selectSpecificationsData: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default:null,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {

    return {
      keyValue: NaN,
      mak: false,
    };
  },
  methods: {
    selectSpecification(st) {
      this.mak = st;
    },
    outSelect(st) {
      const thisis = this;
      setTimeout(function () {
        thisis.mak = st;
      }, 200);
    },
    inputHandle(val) {
      this.selectSpecification(false);
    },
    checkOption(val, ind) {
      this.$emit('select', val.name, this.index, ind);
      this.keyValue = val.name;
    },
  },
};
</script>

<style  scoped>
.selectInput {
  position: relative;
  width: 100%;
  min-width: 100px;
  .specificationSelect {
    position: absolute;
    width: 100%;
    border-radius: 3px;
    border: solid 1px #e4e7ed;
    line-height: 30px;
    text-align: center;
    background: #fff;
    top: 50px;
    z-index: 99;
    .items {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      line-height: 35px;
      border-bottom: solid 1px #f4f4f4;
      color: #666;
      margin: 0 !important;
      &:hover {
        background-color: #fffbf0;
      }
      &:active {
        background-color: #fffbf0;
        color: #ffc200;
      }
    }
    .none {
      font-size: 14px;
    }
  }
}
</style>
